﻿<!DOCTYPE html>
<html>

<head>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">


    <title>权限配置</title>

    <link rel="shortcut icon" href="favicon.ico">
	<link href="css/bootstrap.min.css?v=3.3.5" rel="stylesheet">
    <link href="css/font-awesome.min.css?v=4.4.0" rel="stylesheet">

    <!-- Data Tables -->
    <link href="css/plugins/dataTables/dataTables.bootstrap.css" rel="stylesheet">
    <link href="js/plugins/layui/css/layui.css" rel="stylesheet">
    <link href="css/animate.min.css" rel="stylesheet">
    <link href="css/plugins/toastr/toastr.min.css" rel="stylesheet">
    <link href="css/plugins/checkboxes/checkboxes.min.css" rel="stylesheet">
    <link href="css/style.min.css?v=4.0.0" rel="stylesheet" />
	<style>
		.roleTr{cursor:pointer;}
		.menuTr td:nth-child(1){cursor:pointer;}

		#layTab_left .showColor{background:#99FFCC;}
		#layTab_center .showColor{background:#99FFCC;}

		.ckbx-style-13{font-size:13px;}

		#layTab_center_bord{
			height:500px;
			overflow:auto;
		}

		#layTab_center{
			overflow-y:scroll;
		}
	</style>
</head>

<body class="gray-bg">
    <div class="wrapper wrapper-content animated fadeInRight"  style="padding-bottom:0px;">
        <div class="row">
            <div class="col-sm-12">
<!-- 页面提示 -->
<div class="collapse" id="collapseExample" style="position:absolute;left:30%;">
	<div class="alert alert-warning alert-dismissable" style="padding:8px;margin-bottom:0px;" >
		<button aria-hidden="true" data-dismiss="alert" style="right:0;" class="close" type="button">×</button>
		该页面只允许超级管理员（开发人员）进行增删改！！！
	</div>
</div>
                    <div class="ibox-title">
                        <h5>基本 <small>分类，查找</small></h5>
                        <div class="ibox-tools">
							<a class="collapse-link" data-toggle="collapse" href="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
								<i class="fa fa-warning"></i>
							</a>
                            <a class="collapse-link" href="javascript:location.href=location.href;">
                                <i class="fa fa-refresh"></i>
                            </a>
                        </div>
                    </div>
            </div>

        </div>

    </div>
	<div class="wrapper wrapper-content animated fadeInRight">
        <div class="row">
			<div class="col-sm-4">
                    <div class="ibox-content">
                        <table id="layTab_left" class="table table-striped table-bordered table-hover dataTables-example">
                            <thead>
                                <tr>
                                    <th>角色</th>
                                    <th>代码</th>
                                </tr>
                            </thead>
                            <tbody>
                            </tbody>
							<tfoot>

							</tfoot>
                        </table>

                    </div>
			</div>
			<div class="col-sm-4">
                <div id="layTab_center_bord" class="ibox-content">
					<table id="layTab_center" class="table table-striped table-bordered table-hover dataTables-example">
						<thead>
							<tr>
								<th>菜单（代码）</th>
								<th>权限</th>
							</tr>
						</thead>
						<tbody>
						</tbody>
						<tfoot>

						</tfoot>
					</table>
				</div>
			</div>

			<div class="col-sm-4">
                <div class="ibox-content">
					<table id="layTab_right" class="table table-striped table-bordered table-hover dataTables-example">
						<thead>
							<tr>
								<th>按钮（代码）</th>
								<th>权限</th>
							</tr>
						</thead>
						<tbody>
						</tbody>
						<tfoot>

						</tfoot>
					</table>
				</div>
			</div>

		</div>
	</div>
    <script src="js/jquery.min.js?v=2.1.4"></script>
    <script src="js/bootstrap.min.js?v=3.3.5"></script>
	<script src="js/plugins/toastr/toastr.min.js"></script>
	<script src="js/plugins/layui/layui.js"></script>
	<script src="js/custom/layTool.js"></script>
    <script type="text/javascript" src="js/custom/app.js" charset="UTF-8"></script>
    <script type="text/javascript" src="js/custom/tools.js" charset="UTF-8"></script>
    <script>
	var pageSize = 10;
	var pageNumber = 1;
	var roleCode;
	var menuCode;
	function searchSysRole(pageNumber ,pageSize){
		var url = 'sysRole/getSimpleRoleByPage';
		jQuery.ajax({
			url:domain + url,
			type:"get",
			data:{"page":pageNumber,"pageSize":pageSize,"status":"ON"},
			crossDomain:true,
			xhrFields:{
				withCredentials:true
			},
			success:function (data) {
				if(data.status == 200){
					var totalPage = data.data.total;//总页数
					pageNumber = data.data.page;//当前页
					var totalRow = data.data.records;//总条数

					//拼凑html
					combHTML(data.data.rows);
				   //分页
					var arr = ["ON"];
					simpleLayPage('layTab_left',totalPage,totalRow,pageNumber ,pageSize,"searchSysRole",arr);
				}else{
					top.toastr.warning(data.msg);
				}
			},
			error:function(data) {
				top.toastr.error("查询列表失败，请检查网络");
			}
		})

	}

	function combHTML(data){
		var htmls = '';
		for (var i=0;i<data.length;i++){
			htmls += '<tr class="gradeU roleTr" data-code="'+ data[i].roleCode +'">';
			htmls += '		<td>'+ data[i].roleName +'</td>';
			htmls += '		<td>'+ data[i].roleCode +'</td>';
			htmls += '</tr>';

		}
		$("#layTab_left tbody").html(htmls);
		//动画
		$("#layTab_left").addClass("animated");
		$("#layTab_left").addClass("fadeInLeftBig");

		$("#layTab_left .roleTr").on("click",function(){
			roleCode = $(this).data("code");
			$("#layTab_left .roleTr").removeClass("showColor");
			$(this).addClass("showColor");
			getMyMenuCodeByRoleCode(roleCode);
			if(menuCode != undefined && menuCode != '' && menuCode != null){
				getButtonCodeByRoleMenuCode(roleCode,menuCode);
			}
		})

	}

	function getMyMenuCodeByRoleCode(roleCode){
		var url = 'roleAuth/getMyMenuCodeByRoleCode';
		jQuery.ajax({
			url:domain + url,
			type:"get",
			data:{"roleCode":roleCode},
			crossDomain:true,
			xhrFields:{
				withCredentials:true
			},
			success:function (data) {
				if(data.status == 200){
					drawMenu(data.data);
				}else{
					top.toastr.warning(data.msg);
				}
			},
			error:function(data) {
				top.toastr.error("查询列表失败，请检查网络");
			}
		})
	}

	function drawMenu(data){

		$.each($(".menuTr input"),function(i,o){
			$(o).prop("checked",false);
			for(var j=0;j<data.length;j++){
				if($(o).data("code") == data[j].menuCode){
				//alert(0);
					$(o).prop("checked","checked");
				}
			}

		})
	}


	//简单版菜单
	function getSimpleCascadeSysMenuList(){
		var url = 'roleAuth/getSimpleCascadeSysMenuList';
		jQuery.ajax({
			url:domain + url,
			type:"get",
			data:{"status":"ON"},
			crossDomain:true,
			xhrFields:{
				withCredentials:true
			},
			success:function (data) {
				if(data.status == 200){
					combMenuHTML(data.data);
				}else{
					top.toastr.warning(data.msg);
				}
			},
			error:function(data) {
				top.toastr.error("查询列表失败，请检查网络");
			}
		})
	}

	function combMenuHTML(data){
		var htmls = new Array();
		for (var i=0;i<data.length;i++){
			var simpleMenu2 = data[i].simpleSysMenuVO;
			var m1Code = data[i].mCode;
			var m1Name = data[i].mName;

			commonHtml(htmls,m1Code ,m1Name ,0,i);
			/*htmls.push('<tr class="menuTr" data-code="'+ m1Code +'">');
			htmls.push('	<td class="menuTd">'+ m1Name + '（'+ m1Code +'）</td>');
			htmls.push('	<td><div class="ckbx-style-13">');
            htmls.push('            <input type="checkbox" id="ckbx-style-13-'+ i +'" data-code="'+ m1Code +'" value="0" name="ckbx-style-13">');
            htmls.push('            <label class="menuButton" for="ckbx-style-13-'+ i +'"></label>');
            htmls.push('        </div>');
			htmls.push('	</td>');
			htmls.push('</tr>');*/

			for(var j=0;j<simpleMenu2.length;j++){
				var simpleMenu3 = simpleMenu2[j].simpleSysMenuVO;
				var m2Code = simpleMenu2[j].mCode;
				var m2Name = simpleMenu2[j].mName;


				commonHtml(htmls,m2Code ,m2Name ,3,i +''+ j);
				/*htmls.push('<tr class="menuTr" data-code="'+ m2Code +'">');
				htmls.push('	<td class="menuTd">&nbsp;&nbsp;&nbsp;├&nbsp;'+ m2Name + '（'+ m2Code +'）</td>');
				htmls.push('	<td><div class="ckbx-style-13">');
				htmls.push('            <input type="checkbox" id="ckbx-style-13-'+ i + j +'" data-code="'+ m2Code +'" value="0" name="ckbx-style-13">');
				htmls.push('            <label class="menuButton" for="ckbx-style-13-'+ i + j +'"></label>');
				htmls.push('        </div>');
				htmls.push('	</td>');
				htmls.push('</tr>');*/

				for(var k=0;k<simpleMenu3.length;k++){
					var simpleMenu4 = simpleMenu3[k].simpleSysMenuVO;
					var m3Code = simpleMenu3[k].mCode;
					var m3Name = simpleMenu3[k].mName;

					commonHtml(htmls,m3Code ,m3Name ,8,i +''+ j + k);
					/*htmls.push('<tr class="menuTr" data-code="'+ m3Code +'">');
					htmls.push('	<td class="menuTd">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;├&nbsp;'+ m3Name + '（'+ m3Code +'）</td>');
					htmls.push('	<td><div class="ckbx-style-13">');
					htmls.push('            <input type="checkbox" id="ckbx-style-13-'+ i + j + k +'" data-code="'+ m3Code +'" value="0" name="ckbx-style-13">');
					htmls.push('            <label class="menuButton" for="ckbx-style-13-'+ i + j + k +'"></label>');
					htmls.push('        </div>');
					htmls.push('	</td>');
					htmls.push('</tr>');*/

					for(var l=0;l<simpleMenu4.length;l++){
						var m4Code = simpleMenu4[l].mCode;
						var m4Name = simpleMenu4[l].mName;

						commonHtml(htmls,m4Code ,m4Name ,13,i +''+ j + k + l);
						/*htmls.push('<tr class="menuTr" data-code="'+ m4Code +'">');
						htmls.push('	<td class="menuTd">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;├&nbsp;'+ m4Name + '（'+ m4Code +'）</td>');
						htmls.push('	<td><div class="ckbx-style-13">');
						htmls.push('            <input type="checkbox" id="ckbx-style-13-'+ i + j + k + l +'" data-code="'+ m4Code +'" value="0" name="ckbx-style-13">');
						htmls.push('            <label class="menuButton" for="ckbx-style-13-'+ i + j + k + l +'"></label>');
						htmls.push('        </div>');
						htmls.push('	</td>');
						htmls.push('</tr>');*/

					}
				}

			}

		}
		$("#layTab_center tbody").html(htmls.join(''));


		//动画
		$("#layTab_center").addClass("animated");
		$("#layTab_center").addClass("fadeInLeftBig");

		//选中行--菜单
		$("#layTab_center .menuTd").on("click",function(){
			$("#layTab_center .menuTr").removeClass("showColor");
			$(this).parent().addClass("showColor");
			menuCode = $(this).parent().data("code");
			getSimpleButtonByMenuCode(menuCode);

		})

		//按钮--菜单
		$("#layTab_center .menuButton").on("click",function(){

			if(roleCode == undefined || roleCode == '' || roleCode == null){
				top.toastr.warning("请先选择角色");
				return false;
			}
			$("#layTab_center .menuTr").removeClass("showColor");
			$(this).parent().parent().parent().addClass("showColor");
			var flag = $(this).prev().is(":checked");
			var currMenuCode = $(this).prev().data("code");
			var obj = $(this);
			if(!flag){
				//启用角色菜单权限
				var result = onOrOffRoleMenuAuth(roleCode,currMenuCode,"ON");
				setTimeout(function(){
					if(!result){$(obj).prev().prop("checked",flag);}
				},800);
			}else{
				var result = onOrOffRoleMenuAuth(roleCode,currMenuCode,"OFF")
				setTimeout(function(){
					if(!result){$(obj).prev().prop("checked",flag);}
				},800);
				menuCode = currMenuCode;
				getSimpleButtonByMenuCode(currMenuCode);
			}
			//$(this).is(':checked')
		})
	}

	function commonHtml(htmls,menuCode ,menuName ,count,str){
			var spaces = '';
			if(count != 0){
				for(var i=0;i<count;i++){
					spaces += '&nbsp;';
				}
				spaces += '├&nbsp;';
			}
			htmls.push('<tr class="menuTr" data-code="'+ menuCode +'">');
			htmls.push('	<td class="menuTd">' + spaces + menuName + '（'+ menuCode +'）</td>');
			htmls.push('	<td><div class="ckbx-style-13">');
            htmls.push('            <input type="checkbox" id="ckbx-style-13-'+ str +'" data-code="'+ menuCode +'" value="0" name="ckbx-style-13">');
            htmls.push('            <label class="menuButton" for="ckbx-style-13-'+ str +'"></label>');
            htmls.push('        </div>');
			htmls.push('	</td>');
			htmls.push('</tr>');
	}

	//获取简单版按钮
	function getSimpleButtonByMenuCode(menuCode){
		var url = 'sysButton/getSimpleButtonByMenuCode';
		jQuery.ajax({
			url:domain + url,
			type:"get",
			data:{"menuCode":menuCode},
			crossDomain:true,
			xhrFields:{
				withCredentials:true
			},
			success:function (data) {
				if(data.status == 200){
					combButtonHTML(data.data);
				}else{
					top.toastr.warning(data.msg);
				}
			},
			error:function(data) {
				top.toastr.error("查询列表失败，请检查网络");
			}
		})
	}

	function combButtonHTML(data){
		$("#layTab_right tbody").html("");
		var htmls = new Array();
		for (var i=0;i<data.length;i++){
			htmls.push('<tr class="buttonTr">');
			htmls.push('<td>'+ data[i].bName  + '（'+ data[i].bCode +'）</td>');
			htmls.push('	<td><div class="ckbx-style-13">');
			htmls.push('            <input type="checkbox" id="ckbx-style-13-3b'+ i +'" data-code="'+ data[i].bCode +'" value="0" name="ckbx-style-13">');
			htmls.push('            <label class="buttonButton" for="ckbx-style-13-3b'+ i +'"></label>');
			htmls.push('        </div>');
			htmls.push('	</td>');
			htmls.push('</tr>');
		}
		$("#layTab_right tbody").html(htmls.join(''));
		//动画
		$("#layTab_right").addClass("animated");
		$("#layTab_right").addClass("fadeInLeftBig");

		setTimeout(function(){
			if(roleCode != undefined && roleCode != '' && roleCode != null){
				getButtonCodeByRoleMenuCode(roleCode,menuCode);
			}
		},100);

		//按钮--按钮
		$("#layTab_right .buttonButton").on("click",function(){

			if(roleCode == undefined || roleCode == '' || roleCode == null){
				toastr.error("请先选择角色");
				return false;
			}
			if(menuCode == undefined || menuCode == '' || menuCode == null){
				toastr.error("请先选择菜单");
				return false;
			}
			var flag = $(this).prev().is(":checked");
			var currButtonCode = $(this).prev().data("code");
			var obj = $(this);
			if(!flag){
				//启用角色按钮权限
				var result = onOrOffRoleButtonAuth(roleCode,menuCode,currButtonCode,"ON");
				setTimeout(function(){
					if(!result){$(obj).prev().prop("checked","");}
				},800);
			}else{
				var result = onOrOffRoleButtonAuth(roleCode,menuCode,currButtonCode,"OFF");
				setTimeout(function(){
					if(!result){$(obj).prev().prop("checked","checked");}
				},800);
			}
			//$(this).is(':checked')
		})
	}


	//按钮（代码）
	function getButtonCodeByRoleMenuCode(roleCode,menuCode){
		var url = 'sysButton/getButtonCodeByRoleMenuCode';
		jQuery.ajax({
			url:domain + url,
			type:"get",
			data:{"roleCode":roleCode,"menuCode": menuCode},
			crossDomain:true,
			xhrFields:{
				withCredentials:true
			},
			success:function (data) {
				if(data.status == 200){
					drawButton(data.data);
				}else{
					top.toastr.warning(data.msg);
				}
			},
			error:function(data) {
				top.toastr.error("查询列表失败，请检查网络");
			}
		})
	}

	function drawButton(data){
		$.each($(".buttonTr input"),function(i,o){
			$(o).prop("checked",false);
			for(var j=0;j<data.length;j++){
				if($(o).data("code") == data[j].buttonCode){
				//alert(0);
					$(o).prop("checked","checked");
				}
			}

		})
	}

	$(function(){
		searchSysRole(pageNumber,pageSize);
		getSimpleCascadeSysMenuList();
	})


	//启用角色菜单权限 禁用角色菜单权限
	function onOrOffRoleMenuAuth(roleCode,menuCode,action){
		var url = 'roleAuth/onOffRoleMenuAuth';
		var result;
		jQuery.ajax({
			url:domain + url,
			type:"post",
			data:{"roleCode":roleCode,"menuCode": menuCode,"action":action},
			crossDomain:true,
			async: false,	//同步
			xhrFields:{
				withCredentials:true
			},
			success:function (data) {
				if(data.status == 200 ){
					top.toastr.success("操作成功");
					result = true;
				}else{
					top.toastr.warning(data.msg);
					result = false;
				}
			},
			error:function(data) {
				top.toastr.error("操作失败，请检查网络");
				result = false;
			}
		})
		return result;
	}

	//启用角色按钮权限 禁用角色按钮权限
	function onOrOffRoleButtonAuth(roleCode,menuCode,buttonCode,action){
		var url = 'roleAuth/onOffRoleButtonAuth';
		var result;
		jQuery.ajax({
			url:domain + url,
			type:"post",
			data:{"roleCode":roleCode,"menuCode": menuCode,"buttonCode":buttonCode,"action":action},
			crossDomain:true,
			async: false,
			xhrFields:{
				withCredentials:true
			},
			success:function (data) {
				if(data.status == 200 ){
					top.toastr.success("操作成功");
					result = true;
				}else{
					top.toastr.warning(data.msg);
					result = false;
				}
			},
			error:function(data) {
				top.toastr.error("操作失败，请检查网络");
				result = false;
			}
		})
		return result;
	}

	</script>


</body>

</html>
